<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>完善当当购物车页面</title>
    <link type="text/css" rel="stylesheet" href="css/cartStyle.css" />
</head>
<body>

<div class="content">
    <div class="logo">
        <img src="images/logo.jpg"><span onclick="close_plan();">关闭</span>
    </div>
    <div class="cartList">
        <ul>
            <li><p  onclick="collection();">移入收藏</p><p onclick="del();">删除</p></li>
            <li id="price0">¥159.00</li> 
            <li>
                <input type="button" name="minus" value="-" onclick="minus(0);">
                <input type="text" name="amount" value="10">
                <input type="button" name="plus" value="+" onclick="plus(0);">
            </li>
            <li>¥<input type="text" name="price" value="159.00"></li>
           
        </ul>
        <ul>
            <li><p  onclick="collection();">移入收藏</p><p onclick="del();">删除</p></li>
            <li id="price1">¥159.00</li>
            <li>
                <input type="button" name="minus" value="-" onclick="minus(1);">
                <input type="text" name="amount" value="10">
                <input type="button" name="plus" value="+" onclick="plus(1);">
            </li>
            <li>¥<input type="text" name="price" value="159.00"></li>
            
            
        </ul>
        <ol>
            <li id="totalPrice">&nbsp;</li>
            <li><span onclick="accounts();">结 算</span></li>
        </ol>
    </div>
</div>
<script>
    // 带参函数
    function minus(num){
        // alert(num);
        // 获取商品的数量
        var count = document.getElementsByName("amount")[num].value; // 获取到的是一个数组，是有2个元素
        if(count <= 1){
            alert("数量不能再减了，再减就没有了");
        } else {
            count = count - 1;
        }
        // 将修改后的数量重新赋值给页面元素
        document.getElementsByName("amount")[num].value = count;

        // 调用小计
        xiaoji();

        // 调用合计
        accounts();

    }

    function plus(num){
        var count = document.getElementsByName("amount")[num].value;
        count = parseInt(count) + 1;  // + 拼接
        document.getElementsByName("amount")[num].value = count;

        // 调用小计
        xiaoji();

        // 调用合计
        accounts();

    }

    // 计算价格
    // 小计
    function xiaoji(){
        // 获取商品的数量
        var counts = document.getElementsByName("amount");  // 获取商品数量的元素  》》 元素.value

        // 获取商品的单价
        var prices = document.getElementsByName("price");

        // 遍历数组
        for (let num = 0; num < counts.length; num++) {
            document.getElementById("price"+num).innerHTML = "¥"+(counts[num].value * prices[num].value);
        }
    }
    xiaoji();

    // 合计
    function accounts(){
        var total = 0;
        var price0 = document.getElementById("price0").innerHTML;
        var price1 = document.getElementById("price1").innerHTML;
        //parseFloat  将字符串类型的小数转换为 数字类型
        total = parseFloat(price0.substring(1)) + parseFloat(price1.substring(1))
        document.getElementById("totalPrice").innerHTML = "¥"+total;

    }





</script>
</body>
</html>